<template>
  <div class="backend-detail">
    <div class="detail-info">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>专家详情</span>
            <el-button type="primary" @click="goList">返回列表</el-button>
          </div>
        </template>

        <div v-loading="loading">
          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">专家姓名：</el-col>
            <el-col :span="21">{{ expertInfoDetail.name }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">专家职务：</el-col>
            <el-col :span="21">{{ expertInfoDetail.expertPost }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">专家职称：</el-col>
            <el-col :span="21">{{ expertInfoDetail.expertTitle }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">专家类别：</el-col>
            <el-col :span="21">{{ expertInfoDetail.expertType }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">专家图片：</el-col>
            <el-col :span="21">
              <div class="expert-img">
                <el-image style="width: 200px;" :src="`${systemStore.frontHost}/TpwpExpertStatic/${expertInfoDetail.unitId}/${isJsonString(expertInfoDetail.expertPic) ? getImagePath(expertInfoDetail.expertPic) : expertInfoDetail.expertPic}`" fit="cover">
                  <template #error>
                    <div class="image-slot">
                      <el-image style="width: 200px;" src="/images/expert_default.png" fit="cover" />
                    </div>
                  </template>
                </el-image>

                <img src="../../../../assets/images/front/expert_medal.png" alt="" srcset="" class="expert-medal" v-if="expertInfoDetail.expertType == '宣讲专家'">
              </div>
              
            </el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">研究方向：</el-col>
            <el-col :span="21">{{ expertInfoDetail.researchDirection }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">研究关键词：</el-col>
            <el-col :span="21">{{ expertInfoDetail.researchKeyword }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">机构：</el-col>
            <el-col :span="21">{{ expertInfoDetail.unit }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">成果总量：</el-col>
            <el-col :span="21">{{ expertInfoDetail.totalAchievements }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">被引频次：</el-col>
            <el-col :span="21">{{ expertInfoDetail.citedCount }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">H指数：</el-col>
            <el-col :span="21">{{ expertInfoDetail.hIndex }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">G指数：</el-col>
            <el-col :span="21">{{ expertInfoDetail.gIndex }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">简介：</el-col>
            <el-col :span="21">{{ expertInfoDetail.expertDesp }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">主学科：</el-col>
            <el-col :span="21">{{ expertInfoDetail.subject }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">核心期刊发文数：</el-col>
            <el-col :span="21">{{ expertInfoDetail.achievementCoreCount }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">下载频次：</el-col>
            <el-col :span="21">{{ expertInfoDetail.downloadCount }}</el-col>
          </el-row>

          <el-row class="detail-item">
            <el-col :span="3" class="detail-label">标准一级代码：</el-col>
            <el-col :span="21">{{ expertInfoDetail.unitId }}</el-col>
          </el-row>

          <!-- <el-row class="detail-item">
            <el-col :span="3" class="detail-label">状态：</el-col>
            <el-col :span="21">{{ checkStatusFieldFormat(expertInfoDetail.expertInfoStatus) }}</el-col>
          </el-row> -->

          <!-- <el-row class="detail-item">
            <el-col :span="3" class="detail-label">确认状态：</el-col>
            <el-col :span="21">{{ checkStatusFieldFormat(expertInfoDetail.expertInfoSureStatus) }}</el-col>
          </el-row> -->
          
        </div>
      </el-card>
    </div>

    <div class="detail-opera">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>控制面板</span>
          </div>
        </template>

        <div class="opera-button">
          <el-dropdown>
            <el-button type="primary" circle>
              <el-icon ><More /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editExpertInfo">编辑</el-dropdown-item>
                <el-dropdown-item @click="deleteExpertInfo">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-card>
    </div>
  </div>
  
</template>

<script>
export default { name: 'backendExpertInfoDetail' }
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { More } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import tEditor from "@/components/tinymceEditor/tEditor.vue"
import { http } from '@/utils/http/index';
import { useSystemStore } from '@/stores/modules/system.js';
import { checkStatusFieldFormat, isJsonString } from "@/utils/backend.js"

const systemStore = useSystemStore()

/* 路由 */
const route = useRouter()

onMounted(() => {
  getExpertInfoDetail()
})

/* 详情数据加载动画 */
const loading = ref(false)

/* 详情内容 */
const expertInfoDetail = ref({})

/* 获取详情内容 */
const getExpertInfoDetail = () => {
  loading.value = true
  http.$GET("/TheoryStudyM/GetExpertInfoDetailById", { Id: route.currentRoute.value.query.id }).then(res => {
    loading.value = false
    if (res.isError) return
    if (!res.result) return
    expertInfoDetail.value = res.result
  })
}

/* 编辑 */
const editExpertInfo = () => {
  route.push({
    path: "/backend/expert-info/add",
    query: { id: route.currentRoute.value.query.id, type: 'edit' }
  })
}

/* 删除 */
const deleteExpertInfo = () => {
  ElMessageBox.confirm(
    '确定要删除此条数据吗？',
    '请确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    http.$POST(`/TheoryStudyM/DelExpertInfoById?Id=${route.currentRoute.value.query.id}`).then(res => {
      if (res.IsError) {
        ElMessage({
          type: 'warning',
          message: '操作失败',
        })
      }else{
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        route.push({
          path: "/backend/expert-info"
        })
      }
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}

/* 处理图片路径 */
const getImagePath = (val) => {
  let str = ""
  let file = JSON.parse(val)

  if(!file.filePathArray) return str

  if(file.filePathArray.length == 1) {
    str = file.filePathArray[0].CompleteFilePath.substring(1)
  }
  return str
}

/* 返回列表 */
const goList = () => {
  route.push({
    path: "/backend/expert-info",
    query: route.currentRoute.value.query.currentPage ? { currentPage: route.currentRoute.value.query.currentPage } : {}
  })
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
.expert-img{
  position: relative;
  width: 200px;
  .expert-medal{
    position: absolute;
    right: 0;
    bottom: 5px;
    z-index: 999;
  }
}
</style>